<script lang="ts" setup>
import {
  ref,
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  watchEffect,
  computed,
  getCurrentInstance,
  watch,
} from "vue";
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
// proxy 替代 this
/**
 * 路由对象
 */
const route = useRoute();
/**
 * 路由实例
 */
const router = useRouter();

const data = reactive({});
const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const emit = defineEmits(["refreshData"]);
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
watch(dialogFormVisible, (newVal, oldVal) => {
  if (newVal == false) {
    form.name = "";
    form.addressOrgin = "";
    form.status = "";
    form.cause = "";
  } else {
    const lastIndex = props.data.fileName.lastIndexOf(".");
    form.name = props.data.fileName.substring(0, lastIndex);
    form.addressOrgin = props.data.addressOrgin;
    form.status = props.data.status;
    form.cause = props.data.remark;
  }
});
const form = reactive({
  name: "",
  addressOrgin: "",
  status: "",
  cause: "",
});
const handleConfrim = () => {
  dialogFormVisible.value = false;
  emit("refreshData", JSON.parse(JSON.stringify(form)));
};
onBeforeMount(() => {});
onMounted(() => {});
watchEffect(() => {});
// 使用toRefs解构
// let { } = { ...toRefs(data) }
defineExpose({
  ...toRefs(data),
  dialogFormVisible,
});
</script>

<template>
  <el-dialog v-model="dialogFormVisible" title="修改文件信息">
    <el-form :model="form">
      <el-form-item label="文件名" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="文件反馈回复" :label-width="formLabelWidth">
        <el-input v-model="form.cause" autocomplete="off" />
      </el-form-item>
      <el-form-item label="文件地址来源" :label-width="formLabelWidth">
        <el-select v-model="form.addressOrgin" placeholder="请选择链接地址来源">
          <el-option label="node访问链接" value="1" />
          <el-option label="网络访问链接" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="文件状态" :label-width="formLabelWidth">
        <el-select v-model="form.status" placeholder="请选择文件状态">
          <el-option label="可访问(正常)" value="1" />
          <el-option label="暂停访问(异常)" value="0" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfrim">确认修改</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.el-button--text {
  margin-right: 15px;
}

.el-select {
  width: 300px;
}

.el-input {
  width: 300px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
